<template>
	<div class="title-box zs-layout-flex-row zs-layout-items-center zs-layout-justify-between">
		<span class="zs-title-sm">{{ title }}</span>
		<el-icon class="cursor-pointer" @click.stop="goDetail">
			<MoreFilled />
		</el-icon>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router';

	const props = defineProps({
		title: {
			type: String,
			required: true,
			default: '',
		},
		projectCode: {
			type: String,
			required: true,
			default: '',
		},
		projectName: {
			type: String,
			required: true,
			default: '',
		},
        showTimeStamp: {
			type: Number,
			required: true,
		}
	});

	const router = useRouter();

	//跳转
	const goDetail = () => {
		if (props.title == '实时用电') {
			router.push({
				path: '/page/routeController/index',
				query: {
					rid: 'EnergyElectricity',
					rTitle: '能源明细表',
					projectCode: props.projectCode,
					projectName: props.projectName,
					showTimeStamp: props.showTimeStamp,
					source: 'dashboard',
				},
			});
		}
	};
</script>

<style scoped lang="scss">
	.title-box {
		padding: 5px 0 15px;
		position: relative;
	}
	.title-box::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: linear-gradient(to right, #259ba8, #1c0bb5, #5755ec);
	}
	
</style>
